// import PropTypes from 'prop-types'
import React, { Fragment, memo } from 'react'
import { PaginationWrapper } from './style'
import Pagination from '@mui/material/Pagination'
import { shallowEqual, useDispatch, useSelector } from 'react-redux'
import { fetchEntireDataAction } from '@/store/modules/entire/createActions'

const EntirePagination = memo((props) => {
  const { totalCount, currentPage, roomList } = useSelector((state) => ({
    totalCount: state.entire.totalCount,
    currentPage: state.entire.currentPage,
    roomList: state.entire.roomList,
  }), shallowEqual)

  const pageCount = Math.ceil(totalCount / 20)
  const countLeft = currentPage * 20 + 1
  const countRight = (currentPage + 1) * 20

  const dispatch = useDispatch()
  function handleChange (e, pageCount) {
    dispatch(fetchEntireDataAction(pageCount - 1))
    window.scrollTo(0, 0)
  }

  return (
    <PaginationWrapper>
      {
        !!roomList.length && (
          <Fragment>
            <div className="pagination">
              <Pagination count={pageCount} onChange={handleChange} />
              <div className="info">第{countLeft} - {countRight}个房源，共超过{totalCount}个</div>
            </div>
            <div className="footer">包含额外附加费用及适用税费。</div>
          </Fragment>
        )
      }
    </PaginationWrapper>
  )
})

EntirePagination.propTypes = {}

export default EntirePagination